<script setup lang="ts">
// 网络情况
import { storeToRefs } from 'pinia'
import { useDealerDataStore } from '@/stores/module/dealerData'
const dealerDataStore = useDealerDataStore() // 创建store实例
const { networkOveRview } = storeToRefs(dealerDataStore)
</script>
<template>
  <div class="grid-data-box">
    <div class="network-number">
      <div>
        <h1>
          <img
            class="net-icon"
            src="@/assets/images/dealer/network-icon.png"
            alt="network-icon"
          />
        </h1>
        <div>
          <h1>{{ networkOveRview.info.activeDistributorNumber }}</h1>
        </div>
        <div>
          <h2>{{ networkOveRview.info.activeDistributorNumberDesc }}</h2>
        </div>
      </div>
    </div>
    <div class="effective-number">
      <div>
        <h1>
          <img
            class="net-icon"
            src="@/assets/images/dealer/network-icon.png"
            alt="network-icon"
          />
        </h1>
        <div>
          <h1>{{ networkOveRview.info.newDistributorNumber }}</h1>
        </div>
        <div>
          <h2>{{ networkOveRview.info.newDistributorNumberDesc }}</h2>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.grid-data-box {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 60px;
  margin-bottom: 20px;
  width: 100%;
  height: 70px;
  border-radius: 5px;
  padding: 40px 0;
  background: linear-gradient(
    90deg,
    rgba(16, 84, 119, 0.4) 0%,
    rgba(16, 83, 119, 0) 100%
  );
  .network-number,
  .effective-number {
    text-align: center;
    h1 {
      font-size: 14px;
      font-weight: 500;
      color: #00edff;
      margin-bottom: 10px;
      text-indent: -1.5em;
      .net-icon {
        width: 22px;
        height: 13px;
      }
    }
    h2 {
      font-size: 11px;
      color: #fff;
    }
  }
}
</style>
